<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=0.6" />
  <title>permission.site (PermissionStatus)</title>
  <link rel="shortcut icon" href="../favicon.ico" />
  <link rel="apple-touch-icon" href="../app-icon.png" />
  <link rel="stylesheet" href="../style.css" />
  <script src="./index.js"></script>
</head>

<body>
  <noscript>
    <div class="jswarning">
      This site does not function without JavaScript!
    </div>
  </noscript>

  <div class="before"></div>
  <div class="content">
    <button id="geolocation">
      Geolocation
      <div class="permission-status">
        Permission status:
        <span id="geolocation-permission-status">⚫️ N/A</span>
      </div>
      <div class="access-status">
        Access status: <span id="geolocation-access-status">⚫️ unknown</span>
      </div>
      <div class="access-status">
        Error message: <span id="geolocation-error-message">N/A</span>
      </div>
    </button>
    <button id="camera">
      Camera
      <div class="permission-status">
        Permission status: <span id="camera-permission-status">⚫️ N/A</span>
      </div>
      <div class="access-status">
        Access status: <span id="camera-access-status">⚫️ unknown</span>
      </div>
      <div class="access-status">
        Error message: <span id="camera-error-message">N/A</span>
      </div>
    </button>
    <button id="microphone">
      Microphone
      <div class="permission-status">
        Permission status:
        <span id="microphone-permission-status">⚫️ N/A</span>
      </div>
      <div class="access-status">
        Access status: <span id="microphone-access-status">⚫️ unknown</span>
      </div>
      <div class="access-status">
        Error message: <span id="microphone-error-message">N/A</span>
      </div>
    </button>
    <button id="camera-microphone">
      Camera + Microphone
      <div class="permission-status">
        Permission status:
        <span id="camera-microphone-permission-status">⚫️ N/A</span>
      </div>
      <div class="access-status">
        Access status:
        <span id="camera-microphone-access-status">⚫️ unknown</span>
      </div>
      <div class="access-status">
        Error message: <span id="camera-microphone-error-message">N/A</span>
      </div>
    </button>

    <div class="demo-instructions">
      <h2>👩🏻‍💻 Demo instructions</h2>
      <strong>Permission status</strong> is the status of this permission returned by
      the
      <a href="https://developer.mozilla.org/en-US/docs/Web/API/Permissions/query" noreferrer noopener>Permissions
        API</a>
      when available.
      <ol>
        <li>
          Click the any button, for example <strong>Geolocation</strong> to request access.
        </li>
        <li>
          Observe the <span class="permission-status">access status</span> changing based on your answer to the prompt.
        </li>
        <li>
          Observe the <span class="permission-status">permission status</span> changing, depending on your answer to the prompt. Possible states are
          <ul>
            <li class="permission-status"><span>🔵 prompt</span></li>
            <li class="permission-status"><span>🔴 denied</span></li>
            <li class="permission-status"><span>🟢 granted</span></li>
            <li class="permission-status"><span>⚫️ N/A</span> · In this browser, the status of this permission
              can't be queried via the Permissions API.</li>
          </ul>
        </li>
        <li>
          Close the tab. Reopen it. Observe that based on the permission permanence model implemented by the user agent, the permission may or may not revert back to the <span class="permission-status">permission
          status</span> <span class="permission-status">🔵 prompt</span>.
        </li>
        <li>
          Navigate to <a href="other-page.html">another page</a> from the current origin in the current tab, or another tab, and compare the permissions state to what you set here. 
          In some user agents, a certain amount of time elapsing, closing all tabs from an origin, and/or having all tabs from an origin in the background for a certain duration will reset the permission state.
        </li>
      </ol>
    </div>
  </div>
  <div class="github-fork-ribbon-wrapper right">
    <div class="github-fork-ribbon">
      <a href="https://github.com/chromium/permission.site">On GitHub</a>
    </div>
  </div>
  <link rel="stylesheet" href="../third_party/github.css" />
</body>

</html>
